/**
 * 2022年1月29日
 * @author zzl
 */

/**
 * AJAX是 Asynchronous JavaScript and XML 的缩写，
 * 指的是通过 JavaScript 的 异步通信，从服务器获取 XML 文档从中提取数据，
 * 再更新当前网页的对应部分，而不用刷新整个网页。
创建AJAX请求的步骤：

创建一个 XMLHttpRequest 对象。
在这个对象上使用 open 方法创建一个 HTTP 请求，
open 方法所需要的参数是请求的方法、请求的地址、是否异步和用户的认证信息。
在发起请求前，可以为这个对象添加一些信息和监听函数。
比如说可以通过 setRequestHeader 方法来为请求添加头信息。
还可以为这个对象添加一个状态监听函数。
一个 XMLHttpRequest 对象一共有 5 个状态，
当它的状态变化时会触发onreadystatechange 事件，
可以通过设置监听函数，来处理请求成功后的结果。
当对象的 readyState 变为 4 的时候，代表服务器返回的数据接收完成，
这个时候可以通过判断请求的状态，
如果状态是 2xx 或者 304 的话则代表返回正常。
这个时候就可以通过 response 中的数据来对页面进行更新了。
当对象的属性和监听函数设置完成后，
最后调用 sent 方法来向服务器发起请求，可以传入参数作为发送的数据体。

作者：CUGGZ
链接：https://juejin.cn/post/6946136940164939813
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
 */


/**
 * @description 原生AJAX（用onreadystatechange）
 * @author zzl
 * @todo     // 可以看到 onreadystatechange 写在 send 之前，
    // send 将请求发送到服务器，然后浏览器就会和服务器形成链接，
    // 连接过程中会不断收到响应数据，就会不断改变 readyState 的值，
    // 所以我们通过对 readyState 的判断就可以知道服务器相应的状态拿到数据
 */
const ajax = {
  get(url, fn) {
    const xhr = new XMLHttpRequest();//创建 XMLHttpRequest 对象
    xhr.open("GET", url, true); //规定请求的类型、URL 以及是否异步处理请求。
    xhr.onreadystatechange = function () {//存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
      if (xhr.readyState === 4) {
        fn(xhr.responseText);//获得字符串形式的响应数据。
      }
    };
    xhr.send();//将请求发送到服务器。
  },
  post(url, data, fn) {
    const xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        fn(xhr.responseText);
      }
    };
    xhr.send(data);
  },
};

/**
 * @description 原生AJAX（用onload）
 * @author zzl
 */
function ajax(url, callBack) {
  let xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.send();
  xhr.onload = function () {
    if (this.status == 200) {
      callBack(JSON.parse(this.response));
    } else {
      throw new Error("error");
    }
  };
}

/**
 * @description 原生AJAX（用onload） promise封装
 * @author zzl
 */
function ajax(url) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.open("GET", url);
    xhr.send();
    xhr.onload = function () {
      if (this.status == 200) {
        resolve(JSON.parse(this.response));
      } else {
        reject(this);
      }
    };
  });
}
